<template>
	<div>
		<Modal :closable="false" v-model="modal" width="80%">
	        <div slot="header">
	        	<div class="disFlex Flex-middle">
                    <div style="flex: 1;min-width: 200px;margin-right:20px;">
                        <Input @keyup.enter.native="searchData" v-model="search" placeholder="请输入页面名称或编号"></Input>
                    </div>
                    <Button type="primary" @click="searchData">搜索</Button>        
                </div>
	        </div>
            <!-- 表格 -->
            <div ref="tableContent" class="micropage-select-wrapper table-content" style="position: relative;overflow-x:hidden;">
                <Spin fix v-if="tableSpinShow"></Spin> 
                <Table align="center" :height="tableHeight"  stripe :columns="columns" :data="tableData">
                    <div slot="footer">
                    <Row type="flex" justify="center" align="middle">
                        <Page :total="totalPage" :page-size=20 :current="page" @on-change="changePage" show-elevator></Page>
                    </Row>
                </div>
                </Table>
            </div>
             <div class="disFlex Flex-center" slot="footer">
                <Button type="primary" @click="ok">确定</Button>
            </div>
	    </Modal>

	</div>
	
</template>

<script>
    
    import { getPageList,createMicroPage,removePage } from "api/shopDecoration.js"

	export default {
		props: {

		},
        data () {
            return {
                sIndex: -1,
                tableSpinShow: false,
                tableHeight: 0,
            	modal: false,
                search: "",
                page: 1,
                totalPage: 20,
                columns: [
                {
                    title: '编号',
                    key: 'label_id'
                },
                {
                    title: '页面名称',
                    key: 'label_name_cn'
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    render: (h, params) => {
                        var that = this;
                        return h('div', [
                            h('Button', {
                                props: {
                                    type:  "primary",
                                    size: "small",
                                    ghost: that.sIndex == params.index ? true : false
                                },
                                on: {
                                    click: () => {
                                         that.sIndex = params.index; 
                                    }
                                }
                            }, that.sIndex == params.index ? '取消' : '选择')
                        ]);
                    }
                }],
                tableData: []
            }
        },
        methods: {
            searchData() {
                this.tableSpinShow = true;
                var parms = {
                    page: this.page,
                    search: this.search.trim()
                }
                getPageList(parms).then(_res=>{
                    this.tableSpinShow = false; 
                    this.tableData = _res.data.labels;
                    if (this.page == 1) {
                        this.totalPage = _res.data.pages*20;
                    }
                }).catch(err=>{
                    this.tableSpinShow = false;
                    this.$Message.error(err.message);   
                })
            },
            // 选择页码
            changePage(page) {
                this.page = page;
                this.searchData();
            },
            show(){
               this.sIndex = -1;
        	   this.modal = true;
               this.searchData();
            },
            ok() {
                this.modal = false;
                var arr = [];
                if (this.sIndex != -1) {
                    arr.push(this.tableData[this.sIndex].label_id+"");
                }
                this.$emit("confirm",arr);
            }	
        },
        created() {

        },
        mounted() {
            this.$nextTick(function () {
                this.tableHeight = document.documentElement.clientHeight*0.5;
            })
        },
        components: {
		}
     }
</script>

<style scoped>
	.table-content {
       
    }
</style>
<style type="text/css">
    .micropage-select-wrapper.table-content .ivu-table td.log-content {
        padding: 16px 0;
    }

    .micropage-select-wrapper.table-content  .ivu-table-title {
        border-bottom: 1px solid #eeeeee;
    }
    
    .micropage-select-wrapper.table-content  .ivu-table:before {
        display: none!important;
        background-color: transparent!important;
    } 

    .micropage-select-wrapper.table-content  .ivu-table:after {
        width: 0!important;
        height: 100%!important;
        background: transparent!important;
        display: none!important;
    }

    .micropage-select-wrapper.table-content  .ivu-table-wrapper {
        border: none!important;
    }

    .micropage-select-wrapper.table-content  tr span {
        font-size: 12px!important;
    }

    .micropage-select-wrapper.table-content  .ivu-table-cell {
        padding-left: 18px!important;
    }
    
</style>

